<template>
  <div class="auth-container">
    <div class="auth-card">
      <h2 class="auth-title">注册</h2>
      <form @submit.prevent="handleRegister">
        <div class="form-group">
          <label for="studentId">学号</label>
          <input
            type="text"
            id="studentId"
            v-model="form.student_id"
            required
            placeholder="请输入学号"
          >
        </div>
        <div class="form-group">
          <label for="username">用户名</label>
          <input
            type="text"
            id="username"
            v-model="form.username"
            required
            placeholder="请输入用户名"
          >
        </div>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input
            type="email"
            id="email"
            v-model="form.email"
            required
            placeholder="请输入邮箱"
          >
        </div>
        <div class="form-group">
          <label for="phone">手机号</label>
          <input
            type="tel"
            id="phone"
            v-model="form.phone"
            required
            placeholder="请输入手机号"
          >
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input
            type="password"
            id="password"
            v-model="form.password"
            required
            minlength="6"
            placeholder="请输入密码（至少6位）"
          >
        </div>
        <div class="form-group">
          <label for="confirmPassword">确认密码</label>
          <input
            type="password"
            id="confirmPassword"
            v-model="form.confirm_password"
            required
            minlength="6"
            placeholder="请确认密码"
          >
          <span v-if="form.password !== form.confirm_password" class="error-text">
            两次密码输入不一致
          </span>
        </div>
        <button type="submit" class="auth-btn" :disabled="form.password !== form.confirm_password">注册</button>
        <div class="auth-switch">
          <span>已有账号？</span>
          <router-link to="/login">立即登录</router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

// 表单数据
const form = reactive({
  student_id: '',
  username: '',
  email: '',
  phone: '',
  password: '',
  confirm_password: ''
});
const errorMsg = ref('');
const router = useRouter();

/**
 * 处理注册逻辑
 * 提交用户注册信息并跳转登录页面
 */
const handleRegister = async () => {
  try {
    errorMsg.value = '';
    // 密码一致性校验
    if (form.password !== form.confirm_password) {
      errorMsg.value = '两次密码输入不一致';
      return;
    }

    // 发送注册请求
    // 终端日志输出注册请求参数
    console.log(`[${new Date().toLocaleString()}] [INFO] 注册请求参数: ${JSON.stringify(form)}`);
     const response = await axios.post('/api/auth/register', form);
     // 终端日志输出注册响应结果
     console.log(`[${new Date().toLocaleString()}] [INFO] 注册响应结果: ${JSON.stringify(response.data)}`);


    // 显示注册成功弹窗，包含用户账号信息
    ElMessage.success(`注册成功！您的账号是：${response.data.userId}，请妥善保管`);

    // 注册成功，跳转到登录页
    router.push('/login');
  } catch (err: any) {
    errorMsg.value = err.response?.data?.message || '注册失败，请检查输入信息';
  }
};
</script>

<style scoped>
/* 样式与Login.vue保持一致 */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
}

.auth-title {
  text-align: center;
  margin-bottom: 25px;
  color: #1e293b;
  font-size: 24px;
  font-weight: 600;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #475569;
  font-weight: 500;
}

input {
  width: 100%;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.2s ease;
}

input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.auth-btn {
  width: 100%;
  padding: 14px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-btn:disabled {
  background-color: #94a3b8;
  cursor: not-allowed;
}

.auth-btn:not(:disabled):hover {
  background-color: #2563eb;
  transform: translateY(-2px);
}

.auth-switch {
  margin-top: 15px;
  text-align: center;
  color: #64748b;
}

.auth-switch a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}

.error-text {
  color: #ef4444;
  font-size: 14px;
  margin-top: 5px;
  display: block;
}
</style>